<template>
  <div id="my-index">
    <!-- 轮播图 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../assets/images/index/banner01.jpeg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../assets/images/index/banner02.jpeg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../assets/images/index/banner03.jpeg" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../assets/images/index/banner04.jpeg" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
    <!-- 两个分区 -->
    <div class="choices">
      <color-block bColor="#80A6DC">
        <template v-slot:text>
          <span @click="gotoRecom">
            <i class="fa fa-book" aria-hidden="true"></i> 免费专区 
          </span>
        </template>
      </color-block>
      <color-block bColor="#D0B2D3">
        <template v-slot:text>
          <span @click="gotoRecom">
            <i class="fa fa-female" aria-hidden="true"></i> 女频精选
          </span>
          
        </template>
      </color-block>
    </div>
    <!-- 显示每一个书籍专栏 -->
    <show-books></show-books>
  </div>
</template>

<script>
// 轮播图模块
import "../assets/swiper/swiper.min.css";
import Swiper from "../assets/swiper/swiper.min.js";
// 行内颜色块
import colorBlock from "../components/colorBlock.vue";
// 显示每一个书籍专栏
import showBooks from "../components/showBooks.vue"

export default {
  name: "myIndex",
  components: {
    colorBlock,
    showBooks,
  },
  mounted() {
    var mySwiper = new Swiper(".swiper-container", {
      loop: true,
      speed: 300,
      autoplay: {
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },
    });
  },
  methods: {
    gotoRecom() {
      this.$router.push({path:'/recommend'});
    }
  }
};
</script>

<style lang="scss">
#my-index {
  .swiper-container {
    .swiper-slide {
      img {
        width: 100%;
      }
    }
    .swiper-pagination {
      text-align: end;
    }
    .swiper-pagination-bullet {
      margin: 0 2px !important;
      background: #fff;
      opacity: 0.6;
    }
    .swiper-pagination-bullet:last-child {
      margin-right: 20px !important;
    }
    .swiper-pagination-bullet-active {
      background: rgb(235, 111, 111);
      opacity: 1;
    }
  }
  .choices {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    height: 70px;
    border-bottom: 1px solid #999;
    margin-top: -12px;
    .color-b {
      width: 45%;
      height: 60%;
    }
  }
}
</style>